<!DOCTYPE html>
<html lang="en"  xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.4.10/dist/antd.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
	<link href="https://cdn.jsdelivr.net/npm/ant-design-vue@1.4.10/dist/antd.min.css" rel="stylesheet" type="text/css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
	<style type="text/css">
		#app{
			margin:100px auto;
			text-align:center;
			width:300px;
		}
		.check{
			float:left;
		}
		#components-form-demo-normal-login .login-form {
			max-width:300px;
		}
		#components-form-demo-normal-login .login-form-forgot {
		  float: right;
		}
		#components-form-demo-normal-login .login-form-button {
		  width: 100%;
		}
	</style>
</head>
<body>
<div id="app">
	<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=630102928,3128643279&fm=26&gp=0.jpg" width="100px" height="100px"/>
    <h1>智慧出行</h1>
	<a-form
		id="components-form-demo-normal-login"
		class="login-form"
	  >
		<a-form-item>
		  <a-input
			v-decorator="[
			  'username',
			  { rules: [{ required: true, message: 'Please input your username!' }] },
			]"
			v-model="username"
			placeholder="Username"
		  >
			<a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
		  </a-input>
		</a-form-item>
		<a-form-item>
		  <a-input
			v-decorator="[
			  'password',
			  { rules: [{ required: true, message: 'Please input your Password!' }] },
			]"
			type="password"
			v-model="password"
			placeholder="Password"
		  >
			<a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
		  </a-input>
		</a-form-item>
		<a-form-item>
		  <a-checkbox
			class="check"
			v-decorator="[
			  'remember',
			  {
				valuePropName: 'checked',
				initialValue: true,
			  },
			]"
		  >
			记住密码
		  </a-checkbox>
		  <a class="login-form-forgot" href="">
			忘记密码？
		  </a>
		  <a-button type="primary" @click="submit" class="login-form-button">
			登录
		  </a-button>
		  
		</a-form-item>
	</a-form>
</div>
<script>
    var app = new Vue({
        // e1: '#app',
        //注意这时l来着l
        el: '#app',
        data: {
			appId:"2056622217",
            username: null,
            password: null,
			ticket:null,
            randstr:null
        },
        methods: {
			submit() {
				if(this.username!=null&&this.password!=null){
					var captcha1 = new TencentCaptcha(this.appId, (res)=>{
						console.log(res)
						// res（用户主动关闭验证码）= {ret: 2, ticket: null}
						// res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
						if(res.ret === 0){
							// alert("ticket"+res.ticket)
							// 票据
							// alert(res.randstr)
							this.ticket=res.ticket
							this.randstr=res.randstr
							let forms=new FormData();
							forms.set("username",this.username);
							forms.set("password",this.password);
							forms.set("ticket",this.ticket);
							forms.set("randstr",this.randstr);
							axios.post("http://47.94.215.148:8080/admin/login",forms,{
									withCredentials: true,
								}).then((res)=>{
										if(res.data.status==1){
											this.$message.success("登陆成功！！！");
											this.createCookie("name",this.username,1/24);
											this.createCookie("id",res.data.message,1/24);
											top.location.href="first.html";
										}
										if(res.data.status==0){
											this.$message.error("未验证成功");
										}
										if(res.data.status==2){
											this.$message.error("用户名或密码错误");
										}
										if(response.data.status == 3) {
											this.$message.error("登录失败,可能没有权限")
											return
										}
								});
							}
						}
					);
					captcha1.show();
				}
				else{
					this.$message.error('不能为空');
				}
			}, 
			createCookie(name,value,days){
				var expires="";
				if(days){
					var date = new Date();
					date.setTime(date.getTime()+(days*24*60*60*1000));
					expires="; expires="+date.toGMTString();
				}
				document.cookie=name+"="+value+expires+"; path=/";
			},
        }

    })
</script>
</body>
</html>